<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="data.js"></script>
    <script src="vue.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .code {

            background: white;
            border: 1px solid black;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .code_three {
            background: white;
            border: 1px solid black;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .item_list {
            width: 7%;
            margin: 10px 5px;
        }

        #head {
            width: 100vw;
            height: 100vh;
            background-color: #eee;
        }

        .bootom_come-enter {
            margin-top: -50px;
        }

        .bootom_come-leave-to {
            margin-top: 50px;
        }

        .bootom_come-enter .bootom_come-leave-to {
            transition: all .5s;
        }

        /* #list_ent{
            display: none;
            background: white;
          
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        } */
    </style>
</head>

<body>
    <div id="app">
        <div id="head">
            <ul class="code">
                <li class="item_list" v-for="(item,item_index) in data" @click="show(item,item_index)"
                    :value="item_index" v-model="charset">
                    {{item.type_one}}
                </li>
            </ul>

            <ul class="code">
                <li class="item_list" v-for="(item_one,index_one) in data[charset].list_2" v-show="compare"
                    v-model="bingo" @click="show_one(item_one,index_one)" :value="bingo==index_one">
                    {{item_one.type_two}}
                </li>
            </ul>
            <!-- id="list_ent" -->
            <ul class="code_three">
                <transition :name="info_li" v-for="(item_list,index_list) in data[charset].list_2[bingo].list">

                    <li class="item_list" v-show="flag" :value="index_list">
                        {{item_list}}
                    </li>
                </transition>

            </ul>

        </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            data: data,
            charset: 0,
            bingo: 0,
            compare: false,
            flag: false,
            info_li: 'type',
        },
        methods: {
            show: function (item, item_index) {
                // console.log(item);
                this.charset = item_index;
                console.log(this.charset, item_index);
                if (this.compare) {
                    this.compare = false
                } else {
                    this.compare = true;
                }

                var wait = this.data[this.charset].list_2[this.bingo].type_two;


                console.log(wait);

            },
            show_one: function (item_one, index_one) {
                this.bingo = index_one;
                console.log(this.bingo, index_one);

                if (this.flag) {
                    this.flag = false;
                    this.info_li = "bootom_come"


                } else {
                    this.flag = true;
                    this.info_li = "bootom_leave"

                }

            },


        }
    })

</script>

</html>